Tiny File Manager | menu

Back Back Up Advanced Editor

<?php
//======================================================================================
//
// Function: Main menu
//
// Programmer: JKJ
// Date      : 2025-04-16
//
// Copyright Reeft A/S (c) - 2025
//======================================================================================

// http://www.openjs.com/scripts/events/keyboard_shortcuts/
// https://htmlcolorcodes.com/color-names/

//======================================================================================
// General config
//======================================================================================
	include "config/config.php";

//======================================================================================
// Check if user is logged in?
//======================================================================================
	include "login_check.php";

//======================================================================================
// Get session variables
//======================================================================================
	include "include/getsession.php";

//======================================================================================
// Set language
//======================================================================================
	include "include/set_language.php";

//======================================================================================
// Set defaults
//======================================================================================

// $referenceCode = $_SESSION['session_dft_referencecode'];
	// $referenceName = $_SESSION['session_dft_referencename'];

//echo '<pre>' . print_r($_SESSION, TRUE) . '</pre>';

//======================================================================================
// Get permission and set classes
//======================================================================================

//======================================================================================

?>
<!DOCTYPE html>
<html lang="en">
<head>
	<title><?php echo $reeft_text0001 ?></title>

<link href="css/bootstrap4.3.1/css/bootstrap.custom.min.css" rel="stylesheet">
	<link href="css/bootstrap4.3.1/css/normalize.css" rel="stylesheet" type="text/css">

<link href="css/custom.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

<link href="css/bootstrap_animation/css/animate4/animate.css" rel="stylesheet" type="text/css">

<style>

.btn-custom-wide {
	height:60px;
	width:210px;
}

xcanvas {
  max-width: 100%;
  height: auto;
  padding-right: 40px; /* Optional CSS backup */
}

</style>

//=============================================================================
// Globals
//=============================================================================
	var DFT_DATE_DISPLAY_FORMAT 		= '<?php echo $DFT_DATE_DISPLAY_FORMAT ?>';
	var DFT_LANGUAGE 					= '<?php echo $DFT_LANGUAGE ?>';

// function setFontAwesomeIconType will be run in .ready, value is from config/config.php
	var iconType = '<?php echo $DFT_SET_FONT_AWESOME_ICON_TYPE ?>';

$(function () {
	  $.scrollUp({
		scrollName: 'scrollUp', // Element ID
		//topDistance: '1800', // Distance from top before showing element (px)
		//topSpeed: 300, // Speed back to top (ms)
		scrollDistance: '300', // Distance from top before showing element (px)
		scrollSpeed: 300, // Speed back to top (ms)
		animation: 'fade', // Fade, slide, none
		animationInSpeed: 200, // Animation in speed (ms)
		animationOutSpeed: 200, // Animation out speed (ms)
		scrollText: false, //'Scroll to top', // Text for element
		activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
	  });
	});

//=============================================================================
// Log off
//=============================================================================
function signoff()
{

window.location.href = "logout.php";

}

//=============================================================================
// Load page
//=============================================================================
function loadPage(url, p1, p2, p3)
{

window.location.href = url;

}

//=============================================================================
// Full screen popup
//=============================================================================
function popUpFull(url, p1, p2, p3)
{

var v1_w  = screen.availWidth;
	var v1_h  = screen.availHeight;

if ( parseInt(v1_w) > 1800 ) {
		v1_w = 1800;
		v1_h = v1_h - 200;
		v1_center = v1_w/0.8;
	}

// Center popup as good as possible
	var left = (screen.width - v1_w) / 2;
	var top = (screen.height - v1_h) / 4;

var winname = 'win_' + url;

params  = 'width='+v1_w;
	params += ', height='+v1_h;
	params += ', top=' + top + ', left=' + left;
	params += ', fullscreen=yes';
	params += ',scrollbars=1';

overview_win = window.open(url,winname, params);
	if (window.focus) {overview_win.focus()}
	return false;

}

//=============================================================================
// Get customer data for the Dashboard
//=============================================================================
function getCustomerData()
{

var parmData = 'data=' + 'result'
				 + '&mode=' + 'mode'
				 ;

$.ajax({
		url: "customer_maintain_dashboard_get.php",
		type: "POST",
		data: parmData,
		dataType: "json",
		cache: false,
	})
	.done(function( jsonData ) {

var recordsTotalActiveFormat	= jsonData.header.recordsTotalActiveFormat;
		var recordsTotalInactiveFormat	= jsonData.header.recordsTotalInactiveFormat;
		var recordsTotalFormat			= jsonData.header.recordsTotalFormat;

$('#customer-menu-active').html( recordsTotalActiveFormat );
		$('#customer-menu-inactive').html( recordsTotalInactiveFormat );
		$('#customer-menu-total').html( recordsTotalFormat );
		
		// Create a simple chart
		createCustomerChart();

})
	.always(function( jsonData ) {

})
	.fail(function( xhr, ajaxOptions, thrownError ) {
		console.log('I am failed..');
		console.log( xhr );

});

}

//=============================================================================
// Create customer chart
//=============================================================================
function createCustomerChart() {
	
	
	// const active = 181;
    // const inactive = 221;
    // const total = active + inactive;
	
	var active = $('#customer-menu-active').text();
	var inactive = $('#customer-menu-inactive').text();
	var total = $('#customer-menu-total').text();
	
	// Make numeric for fuck sake...
	var active 		= parseInt( active );
	var inactivee 	= parseInt( inactive );
	var Total		= parseInt( total );
	
    const ctx = document.getElementById('customerChart').getContext('2d');

new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Active', 'Inactive'],
        datasets: [{
          label: 'Customer Records',
          data: [active, inactive],
          backgroundColor: ['#4CAF50', '#F44336']
        }]
      },
      options: {
		layout: {
			padding: {
				right: 70  // ⬅️ Increase this value to give more space
			}
		},		  
        indexAxis: 'y',
        responsive: true,
		animation: false,  // No animation		
		// animation: {
			// duration: 1200,
			// easing: 'easeOutBack',
            // delay: (ctx) => ctx.dataIndex * 300 // stagger animation
		// },		
        plugins: {
          title: {
            display: false,
            text: 'Customer Status Overview'
          },
          legend: {
            display: false
          },
          datalabels: {
            anchor: 'end',
            align: 'right',
            color: 'black',
            font: {
              weight: 'bold'
            },
            formatter: function(value) {
				if (total != 0) {	
					const percent = ((value / total) * 100).toFixed(1);
					return `${value.toLocaleString()} (${percent}%)`;
				} else {
					return `0 (0%)`;
				}
            }
          }
        },
        scales: {
          x: {
            beginAtZero: true,
            ticks: {
              display: false  
            },
            grid: {
              display: false,
              drawBorder: false
            }
          },
          y: {
            grid: {
              display: false
            }
          }
        }
      },
      plugins: [ChartDataLabels]
    });

}

//=============================================================================
// Set clock
//=============================================================================
function updateClock() {

var currentTime = moment().format('YYYY-MM-DD HH:mm:ss');
	currentTime = REEFT_format_date( currentTime, DFT_DATE_DISPLAY_FORMAT )

$('#current-time').html( currentTime );

}

//=============================================================================
// jQuery - Ready
//=============================================================================
$(document).ready(function()
{
	//-----------------------------------------------------------------------
	// Start the clock
	//-----------------------------------------------------------------------
		updateClock();
		setInterval(function() {
			updateClock();
		}, 1000);
	//-----------------------------------------------------------------------

// Get customer data
	getCustomerData();

// Set font awesome icon type
	setFontAwesomeIconType( iconType );

// Log off
	shortcut.add("Alt+Q",function() {
		$('#signoff-button').click();
	});

});
// -->
</script>

</head>

<body>

<div class="row d-none" id="re-login-area">
			<div class="col text-right">
				<div id="data-result-reference"></div>
			</div>
		</div>

<div class="row mt-2 border border-dark p-1 rounded d-none">
					<div class="col h6 text-success font-weight-bold">
						Active customers
						<div id="customer-menu-active">.</div>
					</div>
					<div class="col h6 text-info font-weight-bold text-center">
						Total Customers
						<div id="customer-menu-total....">.</div>
					</div>
					<div class="col h6 text-danger font-weight-bold text-right">
						Inactive customers
						<div id="customer-menu-inactive">.</div>
					</div>
				</div>

</div>

</div>

<?php
	include "include/footer.php";
?>

</body>
</html>